<template>
  <div class="page-content">

    <!-- 工具栏区域 -->
    <table-bar :showTop="false"
               :columns="columns"
               @changeColumn="changeColumn">
      <!-- 条件查询区域 -->
      <div slot="top">
        <el-form :model="queryForm"
                 :rules="queryFormRules"
                 ref="queryFormRef"
                 label-width="70px">
          <!-- <el-row :gutter="20">
          </el-row> -->
          <el-row :gutter="20">
            <!-- 日期查询 -->
            <el-col :xs="24"
                    :sm="12"
                    :lg="6">
              <el-form-item label="记录时间"
                            prop="date">
                <el-date-picker v-model="date"
                                @change="dateChange"
                                type="daterange"
                                value-format="yyyy-MM-dd"
                                range-separator="-"
                                start-placeholder="开始日期"
                                end-placeholder="结束日期">
                </el-date-picker>
              </el-form-item>
            </el-col>
            <!-- 工艺名称 -->
            <el-col :xs="24"
                    :sm="12"
                    :lg="6">
              <el-form-item label="工艺名称"
                            prop="echnologyName">
                <el-input v-model="queryForm.echnologyName"
                          clearable
                          placeholder="请输入工艺名称"></el-input>
              </el-form-item>
            </el-col>
            <!-- 工艺描述 -->
            <el-col :xs="24"
                    :sm="12"
                    :lg="6">
              <el-form-item label="工艺描述"
                            prop="technologyDescribe">
                <el-input v-model="queryForm.technologyDescribe"
                          clearable
                          placeholder="请输入所属工艺描述"></el-input>
              </el-form-item>
            </el-col>

            <!-- 搜索重置 -->
            <el-row :xs="24"
                    :sm="12"
                    :lg="6"
                    style="float: right; margin-right: 10px;">
              <el-button type="primary"
                         @click="query">搜索</el-button>
              <el-button @click="resetForm('queryFormRef')">重置</el-button>
            </el-row>
          </el-row>
        </el-form>
      </div>
      <!-- 左侧按钮 -->
      <div slot="bottom">
        <el-button type="primary"
                   plain
                   @click="showAddDialog">新增工艺</el-button>
        <el-button type="danger"
                   plain
                   @click="delByIds">批量删除</el-button>
      </div>

    </table-bar>

    <!-- 表格区域 -->
    <the-table :data="technologyList"
               :showPage="false"
               @getDataBySelectBox="handleSelectionChange"
               ref="table">
      <el-table-column type="selection"
                       width="55"></el-table-column>

      <el-table-column label="工艺id"
                       prop="technologyId"
                       v-if="columns[0].show" />
      <el-table-column label="工艺名称"
                       prop="echnologyName"
                       v-if="columns[1].show" />
      <el-table-column label="工艺描述"
                       prop="technologyDescribe"
                       v-if="columns[2].show">
        <template slot-scope="scope">
          <el-popover v-if="scope.row.technologyDescribe.length>8"
                      placement="top"
                      width="200"
                      trigger="hover"
                      :content="scope.row.technologyDescribe">
            <div slot="reference">{{shortDescribe(scope.row.technologyDescribe)}}
            </div>
          </el-popover>
          <div v-else>{{scope.row.technologyDescribe}}</div>
        </template>
      </el-table-column>
      <el-table-column label="创建时间"
                       prop="gmtCreate"
                       v-if="columns[3].show" />
      <el-table-column label="修改时间"
                       prop="gmtModified"
                       v-if="columns[4].show" />

      <el-table-column fixed="right"
                       label="操作"
                       width="150px"
                       v-if="columns[5].show">
        <template slot-scope="scope">
          <el-button type="text"
                     icon="el-icon-edit"
                     @click="showEditDialog(scope.row)">修改
          </el-button>
          <el-button type="text"
                     style="color: #FA6962"
                     icon="el-icon-delete"
                     @click="delById(scope.row)">
            删除
          </el-button>
        </template>
      </el-table-column>
    </the-table>

    <!-- 分页器区域 -->
    <el-pagination layout="total, sizes, prev, pager, next, jumper"
                   :page-sizes="[1, 5, 10, 15]"
                   :page-size="pageSize"
                   :current-page="pageNum"
                   :total="total"
                   @size-change="handleSizeChange"
                   @current-change="handleCurrentChange"
                   class="page">
    </el-pagination>

    <!-- 修改工艺对话框 -->
    <el-dialog title="修改屠宰工艺"
               :visible.sync="editDialog"
               @close="dialogClose('addFormRef')"
               width="
               30%">
      <el-form :model="editForm"
               :rules="editFormRules"
               ref="editFormRef"
               label-width="80px">
        <el-form-item label="工艺名称"
                      prop="echnologyName">
          <el-input v-model="editForm.echnologyName"
                    clearable></el-input>
        </el-form-item>
        <el-form-item label="工艺描述"
                      prop="technologyDescribe">
          <el-input type="textarea"
                    clearable
                    v-model="editForm.technologyDescribe"></el-input>
        </el-form-item>
      </el-form>
      <span slot="footer"
            class="dialog-footer">
        <el-button @click="editDialog = false">取 消</el-button>
        <el-button type="primary"
                   @click="update">确 定</el-button>
      </span>
    </el-dialog>

    <!-- 添屠宰艺对话框 -->
    <el-dialog title="添加屠宰工艺"
               :visible.sync="addDialog"
               @close="dialogClose('addFormRef')"
               width="30%">
      <el-form :model="addForm"
               :rules="editFormRules"
               ref="addFormRef"
               label-width="100px">
        <el-form-item label="工艺名称"
                      prop="echnologyName">
          <el-input v-model="addForm.echnologyName"
                    clearable></el-input>
        </el-form-item>
        <el-form-item label="工艺描述"
                      prop="technologyDescribe">
          <el-input type="textarea"
                    clearable
                    v-model="addForm.technologyDescribe"></el-input>
        </el-form-item>
      </el-form>
      <span slot="footer"
            class="dialog-footer">
        <el-button @click="addDialog = false">取 消</el-button>
        <el-button type="primary"
                   @click="add">确 定</el-button>
      </span>
    </el-dialog>

  </div>
</template>

<script>
import { changeColumn, pagination, dialogClose, multipleSelection, queryForm } from '@/api/mixin/'
import { dateShorter } from '@/utils/utils'
export default {
  name: "TechnologyManage",

  meta: {
    title: "屠宰工艺管理",
  },
  mixins: [changeColumn, pagination, dialogClose, multipleSelection, queryForm],
  data () {
    return {
      dialogVisible: false,
      IfdialogVisible: false,
      tableData: [
        {
          name: "冰鲜活禽生产",
          workmanship: [],
          house: "广州市海珠区仲恺路01",
          describe: "工作人员通过吊挂鸽子上生产线，鸽子经过电麻。。。",
        },
        {
          workmanship: "烫毛",
          name: "沥血",
          house: "广州市海珠区仲恺路02",
          describe: "工作人员通过吊挂鸽子上生产线，鸽子经过电麻。。。",
        },
        {
          workmanship: "打毛",
          name: "掏脏",
          house: "广州市海珠区仲恺路03",
          describe: "工作人员通过吊挂鸽子上生产线，鸽子经过电麻。。。",
        },
        {
          workmanship: "去余毛",
          name: "预冷沥水",
          house: "广州市海珠区仲恺路04",
          describe: "工作人员通过吊挂鸽子上生产线，鸽子经过电麻。。。",
        },
        {
          name: "分级包装",
          workmanship: [],
          house: "广州市海珠区仲恺路05",
          describe: "工作人员通过吊挂鸽子上生产线，鸽子经过电麻。。。",
        },
      ],
      technologyList: [],
      columns: [
        { name: "工艺id", show: false },
        { name: "工艺名称", show: true },
        { name: "工艺描述", show: true },
        { name: "创建时间", show: true },
        { name: "修改时间", show: true },
        { name: "操作", show: true },
      ],
      //条件查询
      date: [],
      queryForm: {
        echnologyName: '',
        technologyDescribe: '',
        begin: '',
        end: ''
      },
      // 条件查询表单检验规则
      queryFormRules: {
        date: [],
        type: [],
        id: []
      },
      editDialog: false,
      addDialog: false,
      editFormRules: {
        echnologyName: [{ required: true, message: '请输入工艺名称', trigger: 'blur' }, { min: 2, max: 12, message: '长度在 2 到 12 个字符', trigger: 'blur' }],
        technologyDescribe: [{ required: true, message: '请输入工艺描述', trigger: 'blur' }],
        processId: [{ required: true }]
      },
      technologyId: '',//修改暂存工艺id
      editForm: {
        guige: 0,//写死
        processId: '',//所属屠宰流程id
        technologyDescribe: '',
        echnologyName: ''
      },
      addForm: {
        guige: 0,
        // slaId: '',
        technologyDescribe: '',
        echnologyName: ''
      },

    };
  },
  mounted () {
    this.getList()
  },
  methods: {
    shortDescribe (val) {
      return val.length < 8 ? val : val.slice(0, 8) + '..'
    },
    async getTechnologyList () {
      const { data: res } = await this.$http.get(`/pigeon/t-slaughterhouse-technology/pageTs/${this.pageNum}/${this.pageSize}`)
      if (res.statusCode !== 20000) return this.$message.error('获取类型列表失败')
      //保存
      dateShorter(res.data.records, 'gmtCreate')
      dateShorter(res.data.records, 'gmtModified')
      this.technologyList = res.data.records
      this.total = res.data.total
      // console.log(res, 'getTechnologyList');
    },
    // 监听日期选择器变化
    dateChange (val) {
      // 没有选中val = null
      // console.log('[ val ] >', val)
      if (!val) {
        this.queryForm.begin = ''
        this.queryForm.end = ''
        return this.getList()
      }
      this.queryForm.begin = val[0]
      this.queryForm.end = val[1]

    },
    // 条件查询
    async query () {
      const { data: res } = await this.$http.get(`/pigeon/t-slaughterhouse-technology/getTsByAllInfo//${this.pageNum}/${this.pageSize}`, { params: this.queryForm })
      console.log(res, 'query');
      if (res.statusCode !== 20000) return this.$message.error('查询失败')

      dateShorter(res.data.records, 'gmtCreate')
      dateShorter(res.data.records, 'gmtModified')
      this.technologyList = res.data.records
      this.total = res.data.total

    },
    getList () {
      this.getTechnologyList()
    },



    /* 删除 */
    delById ({ technologyId }) {
      this.delById_Pigeon('/pigeon/t-slaughterhouse-technology/deleteTsById/', technologyId)
    },
    delByIds () {
      this.delByIds_Pigeon('/pigeon/t-slaughterhouse-technology/DeleteTsByIds/', 'technologyId')
    },
    // delByIds_Pigeon方法封装屠宰模块的批量删除，仅屠宰的接口有统一
    /* 删除 */

    /* 修改 */
    async showEditDialog ({ processId, technologyId }) {
      //保存id
      this.editForm.processId = processId
      this.technologyId = technologyId
      //获取最新的记录
      const { data: res } = await this.$http.get(`/pigeon/t-slaughterhouse-technology/getLaughterById/${technologyId}`)
      if (res.statusCode !== 20000) return this.$message.error('获取最新的工艺记录失败')

      console.log('showEditDialog', res);

      //保存
      this.editForm.echnologyName = res.data.echnologyName
      this.editForm.technologyDescribe = res.data.technologyDescribe
      // 显示
      this.editDialog = true
    },
    update () {
      // 表单验证
      this.$refs.editFormRef.validate(async flag => {
        if (!flag)
          return this.$message.error('请正确填写表单')
        // 发送请求
        const { data: res } = await this.$http.put(`
/pigeon/t-slaughterhouse-technology/updateTs/${this.technologyId}`, this.editForm)
        if (res.statusCode !== 20000) return this.$message.error('修改失败')


        // 关闭
        this.editDialog = false
        this.$message.success('修改成功')

        //刷选列表
        this.getList()

      })


    },
    /* 修改 */

    /* 新增 */
    async showAddDialog () {
      this.addForm.guige = 0 // 写死？
      this.addDialog = true
    },
    async add () {
      this.$refs.addFormRef.validate(async flag => {
        if (!flag)
          return this.$message.error('请正确填写表单')
        const { data: res } = await this.$http.post(`/pigeon/t-slaughterhouse-technology/saveTs`, this.addForm)
        if (res.statusCode !== 20000) return this.$message.error('添加失败')

        this.$message.success('添加成功')
        this.getList()
        this.addDialog = false
      })

    }
    /* 新增 */
  },
}
</script>

<style lang="scss" scoped>
.page {
  margin-top: 6px;
  text-align: center;
}
.el-date-editor--daterange.el-input,
.el-date-editor--daterange.el-input__inner,
.el-date-editor--timerange.el-input,
.el-date-editor--timerange.el-input__inner {
  width: 100%;
}
/deep/ .el-input .el-input--small .el-input--suffix {
  width: 100%;
}
</style>